<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="订单详情" />

        <view
            class="wrap paddingBottom"
            :style="{ '--navigation-height': navigationHeight + 'px' }"
            v-if="dataInfo"
        >
            <image
                class="wrap-bg"
                :src="getImageURL('navigationBar/top_bg.png')" 
                mode="widthFix"
            />

            <view class="order-status f-32 flex column just-center">
                <view class="status f-32">
                    {{ dataInfo.status_text }}
                </view>

                <view class="down-time f-24" v-if="dataInfo.status === '1'">
                    请在{{ minute }}分{{
                        second
                    }}秒内完成支付，逾期订单将自动取消
                </view>
            </view>

            <view class="order-process white-bg flex align-center mtp">
                <block v-for="(item, index) in process_list" :key="index">
                    <view class="process-item">
                        <view class="flex column align-center just-center">
                            <view
                                class="process-icon flex align-center just-center"
                                :class="{
                                    'process-icon-active':
                                        item.status <= dataInfo.status,
                                }"
                            >
                                <image
                                    mode="heightFix"
                                    :src="
                                        getImageURL(
                                            `technician/order/${item.icon}_${
                                                item.status <= dataInfo.status
                                                    ? 'active'
                                                    : 'normal'
                                            }.png`
                                        )
                                    "
                                />
                            </view>

                            <view
                                class="process-title f-24"
                                :class="{
                                    active: item.status <= dataInfo.status,
                                }"
                            >
                                {{ item.title }}
                            </view>
                        </view>
                    </view>
                </block>
            </view>

            <view
                class="mtp wrap-info white-bg"
                v-if="dataInfo.is_upgrade == 1"
            >
                <view class="title-color fb-28"> 原服务内容 </view>

                <view class="info-bg flex align-center">
                    <image
                        class="file"
                        :src="dataInfo.original_data.goods.service_cover"
                    />

                    <view class="info-right">
                        <view class="title-color fb-30 limit-num-line">
                            {{ dataInfo.original_data.goods.service_name }}
                        </view>

                        <view class="service-time f-26">
                            服务时长:{{ dataInfo.original_data.time_long }}分钟
                        </view>

                        <view class="price price-color">
                            <text class="symbol fb-24">¥</text>
                            <text class="fb-32">{{
                                dataInfo.original_data.service_price
                            }}</text>
                        </view>
                    </view>

                    <view class="title-color f-26">
                        x{{ dataInfo.original_data.goods.num }}
                    </view>
                </view>
            </view>

            <view class="mtp wrap-info white-bg">
                <view class="title-color fb-28" v-if="dataInfo.is_add == 1">
                    加钟内容
                </view>
                <view class="title-color fb-28" v-if="dataInfo.is_upgrade == 1">
                    升级后服务
                </view>

                <view class="info-bg flex align-center">
                    <image class="file" :src="dataInfo.goods.service_cover" />

                    <view class="info-right">
                        <view class="title-color fb-30 limit-num-line">
                            {{ dataInfo.goods.service_name }}
                        </view>

                        <view class="service-time f-26">
                            服务时长:{{ dataInfo.time_long }}分钟
                        </view>

                        <view class="price price-color">
                            <text class="symbol fb-24">¥</text>
                            <text class="fb-32">{{
                                dataInfo.service_price
                            }}</text>
                        </view>
                    </view>

                    <view class="title-color f-26">
                        x{{ dataInfo.goods.num }}
                    </view>
                </view>
            </view>

            <view class="wrap-address-bg white-bg mtp">
                <view class="title-color fb-28"> 客户信息 </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 下单人: </view>
                    <view class="value f-28">
                        {{ dataInfo.address.name }}
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 联系方式: </view>
                    <view class="value f-28">
                        {{ dataInfo.address.mobile }}
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 服务地址: </view>
                </view>

                <view class="value f-28 address">
                    {{ dataInfo.address.address }}
                    {{ dataInfo.address.street_name }}
                    {{ dataInfo.address.community_name }}
                    {{ dataInfo.address.area }}
                </view>
            </view>

            <view class="mtp wrap-technician-info white-bg">
                <view class="title-color fb-28"> 订单信息 </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 服务师: </view>
                </view>

                <view class="technician-info flex align-center just-between">
                    <image
                        class="avatar"
                        :src="dataInfo.technician.work_image"
                    />

                    <view class="nickname-distance">
                        <view class="title-color f-28">
                            {{ dataInfo.technician.name }}
                        </view>
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 下单时间: </view>

                    <view class="value f-28">
                        {{ dataInfo.createtime_text }}
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 服务时间: </view>

                    <view class="value f-28">
                        {{ dataInfo.strattime_text }}
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 项目费用: </view>

                    <view class="value f-28 price-color">
                        ¥{{ dataInfo.service_price }}
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 支付方式: </view>

                    <view class="value f-28">
                        {{ dataInfo.pay_type_text }}
                    </view>
                </view>

                <view class="total-price flex align-center just-end f-28">
                    <text class="title-color">总计：</text>
                    <text class="price-color">
                        ¥{{ dataInfo.total_price }}
                    </text>
                </view>
            </view>

            <view class="mtp">
                <orderProgress :dataInfo="dataInfo" />
            </view>
        </view>

        <view
            class="footer safe-area flex align-center just-end"
            v-if="dataInfo && dataInfo.status !== 10"
        >
            <orderBtn
                :btnType="'2'"
                :dataInfo="dataInfo"
                @onRefresh="getData"
                @onApplyRefund="onApplyRefund"
            />
        </view>
    </div>
</template>

<script>
import { orderDetail } from "@/API/API/order.js";
import orderBtn from "@/subPages/components/orderBtnBg/orderBtnBg.vue";
import orderProgress from "@/subPages/components/orderProgress/orderProgress.vue";
export default {
    components: {
        orderBtn,
        orderProgress,
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight, // 导航栏高度
            orderID: "", // 订单ID

            downTimer: null, //倒计时
            minute: 0, // 订单超时时间的分钟数
            second: 0, // 订单超时时间的秒数
            dataInfo: null, // 订单详情数据

            process_list: [
                {
                    title: "技师接单",
                    status: "3",
                    icon: "jsjd",
                },

                {
                    title: "开始服务",
                    status: "6",
                    icon: "ksfw",
                },
                {
                    title: "服务完成",
                    status: "10",
                    icon: "fwwc",
                },
            ],
        };
    },
    onLoad(options) {
        this.orderID = options.order_id;
        this.getData();
    },

    onPullDownRefresh() {
        this.onRefresh();
    },
    methods: {
        onRefresh() {
            this.getData();  
        },
        /**
         * 实时位置
         */
        onOpenLocation() {
            uni.openLocation({
                latitude: parseFloat(this.dataInfo.technician.lat),
                longitude: parseFloat(this.dataInfo.technician.lng),
                address: this.dataInfo.technician.address,
            });
        },
        /**
         * 联系技师
         */
        onCallPhone() {
            uni.makePhoneCall({
                phoneNumber: this.dataInfo.technician.mobile.toString(),
            });
        },

        /**
         * 倒计时计算
         */
        calculationDownTime() {
            const now = new Date().getTime();
            const end = this.dataInfo.autocancel * 1000;
            const surplus = Math.floor((end - now) / 1000);

            if (surplus <= 0) {
                clearInterval(this.downTimer);
                // this.getData();
                return;
            }
            const second = Math.floor(surplus % 60);
            const minute = Math.floor(surplus / 60);

            this.minute = minute.toString().padStart(2, "0");
            this.second = second.toString().padStart(2, "0");
        },
        /**
         * 网络请求
         */
        getData() {
            orderDetail(this.orderID).then((res) => {
                this.dataInfo = res.data;
                clearInterval(this.downTimer);
                if (this.dataInfo.status === "1") {
                    this.calculationDownTime();
                    this.downTimer = setInterval(() => {
                        this.calculationDownTime();
                    }, 1000);
                }
            });
        },
        // 申请退款
        onApplyRefund(id) {
            uni.navigateTo({
                url: `/subPages/technician/recruit/refund?order_id=${id}`,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    --bottom-height: 140rpx;
    --limit-num: 1;
    position: relative;
    z-index: 1;
    padding: 20rpx;
    box-sizing: border-box;

    .white-bg {
        width: 100%;
        overflow: hidden;
        background-color: white;
        border-radius: 20rpx;
    }

    .order-status {
        width: 100%;
        height: 88rpx;
        overflow: hidden;

        .status {
            color: $bg-text-color;
        }

        .down-time {
            color: $bg-text-color;
            margin-top: 15rpx;
        }
    }

    .order-process {
        height: 186rpx;

        .process-item {
            display: inline-block;
            flex: 1;
            overflow: hidden;
            height: 186rpx;

            > view {
                width: 100%;
                height: 100%;

                .process-icon {
                    width: 90rpx;
                    height: 90rpx;
                    border-radius: 50%;
                    border: 2rpx solid #666666;

                    > image {
                        height: 48rpx;
                    }
                }
                .process-icon-active {
                    border-color: $theme-color !important;
                }

                .process-title {
                    margin-top: 15rpx;
                    color: $title-color;
                }
            }
        }
    }

    .wrap-info {
        padding: 30rpx 20rpx;
        box-sizing: border-box;

        .info-bg {
            margin-top: 30rpx;
            width: 100%;
            overflow: hidden;

            .file {
                width: 176rpx;
                height: 176rpx;
                border-radius: 20rpx;
                overflow: hidden;
            }

            .info-right {
                margin-left: 20rpx;
                flex: 1;
                overflow: hidden;
                margin-right: 10rpx;

                .service-time {
                    margin-top: 24rpx;
                    color: #a3a3a3;
                }

                .price {
                    margin-top: 24rpx;

                    .symbol {
                        margin-right: 5rpx;
                    }
                }
            }
        }
    }

    .wrap-address-bg {
        padding: 30rpx 20rpx;
        box-sizing: border-box;

        .address {
            text-align: left !important;
            margin-top: 30rpx;
            line-height: 40rpx;
        }
    }

    .wrap-technician-info {
        padding: 30rpx 20rpx;
        box-sizing: border-box;

        .technician-info {
            margin-top: 30rpx;
            width: 100%;
            overflow: hidden;

            .avatar {
                width: 82rpx;
                height: 82rpx;
            }

            .nickname-distance {
                margin-left: 30rpx;
                flex: 1;
                overflow: hidden;

                .distance {
                    margin-top: 12rpx;
                    color: #b0b0b0;
                }
            }

            .btn-bg {
                margin-left: 10rpx;
                overflow: hidden;

                > view {
                    height: 48rpx;
                    line-height: 48rpx;
                    text-align: center;
                    color: $theme-color;
                    border-radius: 6rpx;
                    border: 2rpx solid $theme-color;
                    margin-right: 20rpx;
                    padding: 0 15rpx;

                    &:last-child {
                        margin-right: 0rpx;
                    }
                }
            }
        }

        .total-price {
            margin-top: 30rpx;
            padding-top: 30rpx;
            border-top: 2rpx solid #ececec;
        }
    }
}

.title-color {
    color: $title-color;
}

.price-color {
    color: $price-color !important;
}

.content-item {
    width: 100%;
    overflow: hidden;
    margin-top: 30rpx;
}
.left {
    color: #999999;
    margin-right: 20rpx;
}

.value {
    flex: 1;
    text-align: right;
    color: $title-color;
}

.mtp {
    margin-top: 20rpx;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(100% - 40rpx);
    height: 128rpx;
    padding: 0 20rpx;
    background-color: white;
    z-index: 10;
}
</style>
